<template>
  <div>
    <h1>后台登录页面</h1>
    <body>
      <input
        id="adminname"
        type="text"
        placeholder="请输入用户名"
        v-model="email"
      />
    </body>
    <input
      id="adminpass"
      type="password"
      placeholder="请输入密码"
      v-model="password"
    />
    <button
      class="btn btn-primary"
      name="loginButton"
      type="button"
      id="login"
      value="登录"
      @click="loginadmin"
    >
      登录
    </button>
  </div>
</template>
 
<script>
import router from "../../router";
export default {
  data() {
    return {
      email: "",
      password: "",
      count: "",
    };
  },
  methods: {
    loginadmin() {
      let user = { email: this.email, password: this.password };
      this.$axios.post("/admin/login", user).then((res) => {
        if (
          res.data.code == 400 &&
          "该用户没有权限访问后台" == res.data.extend.result
        ) {
          this.$message.error("该用户没有权限访问后台");
        } else if (
          res.data.code == 400 &&
          "邮箱输入错误" == res.data.extend.result
        ) {
          this.$message.error("邮箱输入错误");
        } else if (
          res.data.code == 400 &&
          "密码输入错误" == res.data.extend.result
        ) {
          this.$message.error("密码输入错误");
        } else if (
          res.data.code == 200 &&
          "登陆成功" == res.data.extend.result
        ) {
          this.$message({
            message: "登录成功，三秒后跳转到后台主页",
            type: "success",
          });
          //签发jwt
          localStorage.setItem("x-access-token", res.data.extend.jwt);
          this.countDown();
        }
      });
    },
    //倒计时三秒跳转到后台首页
    countDown() {
      const TIME_COUNT = 3;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.timer = setInterval(() => {
          if (this.count > 1 && this.count <= TIME_COUNT) {
            //限制倒计时区间
            this.count--;
          } else {
            clearInterval(this.timer); //删除定时器
            this.timer = null;
            //跳转的页面写在此处
            router.push("./index");
          }
        }, 1000);
      }
    },
  },
};
</script>

<style>
.routerto{
  color: #fff;
  text-decoration: none;

}
</style>